<template>
  <md-field-group class="register_view">
    <div>我们将发送验证码到您的手机</div>
    <md-field
        v-model="mobile"
        icon="mobile"
        placeholder="请输入手机号"/>

    <div class="register_submit">
      <van-button size="large" type="danger" @click="submitCode">下一步</van-button>
    </div>

    <div class="register_footer">
      已有账号?
      <router-link to="/login" class="red">登录</router-link>
    </div>
  </md-field-group>
</template>

<script>
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
import { mobileReg } from '@/utils/validate';

export default {
  data() {
    return {
      mobile: ''
    };
  },

  methods: {
    submitCode() {
      if(this.mobile === ''){
        return
      }
      if(!mobileReg.test(this.mobile)){
        this.mobile = ''
        return
      }
      try {
        this.$router.push({
          name: 'registerSubmit',
          params: { phone: this.mobile}
        });
      } catch (error) {
        console.log(error.message);
      }
    }
  },

  components: {
    [field.name]: field,
    [fieldGroup.name]: fieldGroup
  }
};
</script>

<style lang="scss" scoped>
div.register_view {
  background-color: #fff;
  padding-top: 30px;
}

div.register_submit {
  padding-top: 30px;
  padding-bottom: 20px;
}

.register_footer {
  text-align: right;
  color: $font-color-gray;
}
</style>
